"use client"
import { useState } from "react"
import { MessageCircle, X } from "lucide-react"

export default function AIAssistantButton() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <>
      {/* AI Assistant Button */}
      <button
        onClick={() => setIsOpen(true)}
        className="fixed bottom-6 right-6 w-14 h-14 bg-gradient-to-r from-purple-500 to-blue-500 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-110 z-40"
        title="AI Assistant (Coming Soon)"
      >
        <MessageCircle className="w-6 h-6 mx-auto" />
      </button>

      {/* AI Assistant Modal (Placeholder) */}
      {isOpen && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-2xl p-6 max-w-md w-full mx-4 shadow-2xl">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-lg font-semibold text-gray-800">AI Assistant</h3>
              <button onClick={() => setIsOpen(false)} className="p-1 hover:bg-gray-100 rounded-full transition-colors">
                <X className="w-5 h-5" />
              </button>
            </div>
            <div className="text-center py-8">
              <MessageCircle className="w-16 h-16 mx-auto text-gray-300 mb-4" />
              <p className="text-gray-600 mb-2">AI Assistant Coming Soon!</p>
              <p className="text-sm text-gray-500">
                We're working on bringing you an intelligent assistant to help manage your todos more efficiently.
              </p>
            </div>
          </div>
        </div>
      )}
    </>
  )
}
